<template>
	<view class="cart-container" v-if="cartList.length >0">
		<view class="shop">
			<van-icon name="shop-o" />
			<text class="shop-name">嗨购商城</text>
		</view>
		<!-- 商品 -->
		<uni-swipe-action>
			<uni-swipe-action-item v-for="item in cartList" :key="item.proid" :right-options="options"
				@click="del(item.proid)">
				<view class="goods-cell">
					<radio :checked="item.checked" color="red" @click="changeState(item.proid,!item.checked)" />
					<van-card class="goods-card" :title="item.proname" :thumb="item.img">
						<template #price>
							<view class="card-footer">
								<text class="card-price">￥{{format(item.price || 0)}}</text>
								<van-stepper theme="round" :value="item.num" @change="changeNum(item.proid,$event)" />
							</view>
						</template>
					</van-card>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<!-- 底部bar -->
		<van-submit-bar button-text="提交订单" :price="price*100	" @submit="submit">
			<van-checkbox checked-color="#c82519" :value="cartList.every(item=>item.checked)" @change="changeSelect">
				全选
			</van-checkbox>
		</van-submit-bar>
	</view>
	<view v-else class="">
		<van-empty image="https://hbimg.huabanimg.com/a4064bdab5f6c800ed664014f3eb7d13a4dd25b3138d0-hYHe07_fw658"
			description="购物车是空的，赶快去挑选好货" />

		<!-- <van-dialog id="van-dialog" /> -->
	</view>
</template>

<script>
	import store from '../../store/index.js'
	// import persistentStorage from '../../utils/storage.js'
	// const storage = persistentStorage()
	import formatPrice from '../../utils/format.js'
	import badge from '../../mixins/badge.js'


	export default {

		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#c82519'
					}
				}]
			}
		},

		mixins: [badge],

		computed: {
			cartList() {
				return this.$store.state.cart.cartList
			},

			price() {
				return this.$store.getters['cart/allSelectPrice']
			},
			sum() {
				return store.getters['cart/allNum']
			}
		},

		methods: {

			// 单个商品状态改变
			changeState(proid, checked) {
				this.$store.commit('cart/changeOne', {
					proid,
					checked
				})
			},
			// 更改商品数量
			changeNum(proid, e) {
				this.$store.commit('cart/changeGoodsNum', {
					proid,
					num: e.detail
				})
			},
			// 删除商品
			del(proid) {
				this.$store.dispatch('cart/syncDel', proid)
			},
			// 全选反选
			changeSelect() {
				this.$store.commit('cart/changeStatus')
			},
			format(val) {
				return formatPrice(val)
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .van-empty__image {
		padding-top: 200rpx;
		width: 150px;
		height: 150px;
	}

	.cart-container {
		padding-bottom: 100px;
		overflow: auto;
		height: calc(100vh - 100px);

		.shop {
			background-color: white;
			border-bottom: 1px solid #edeeed;
			padding: 5px 10px;
			// display: flex;

			.shop-name {
				margin-left: 5px;
				font-size: 14px;
				color: #3f3f3f;
			}
		}

		.goods-cell {
			display: flex;
			background-color: white;
			border-bottom: 1px solid #edeeed;
			// height: 100%;
			height: 127px;
			align-items: center;

			::v-deep .van-card {
				background-color: transparent;
				padding: 8px 8px
			}

			.card-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.card-price {
				font-size: 16px;
				color: #c82519
			}

			radio {
				margin-left: 15px;
			}

			// .checkbox {
			// 	width: 40px;
			// 	height: 100%;
			// 	line-height: 100%;
			// 	text-align: center;
			// }

			.goods-card {
				flex: 1;
				margin: 0;
				background-color: white;
			}
		}

		.delete-button {
			height: 100%;
		}

		::v-deep .van-submit-bar {
			background: hsla(0, 0%, 100%, 0.95);
			// position: absolute;
			// bottom: 50px;
		}
	}

	// 去除滚动条
	.cart-container::-webkit-scrollbar {
		width: 0 !important;
	}

	::v-deep .van-checkbox__icon {
		background-color: var(--checked--color);
		border-color: var(--checked--color);
	}
</style>